<template>
  <div>
    <ul class="topTag">
      <li @click="selectType(0)" :class="{ 'topTag--active': tagType == '0' }">
        <span>商品信息</span>
      </li>
      <li @click="selectType(1)" :class="{ 'topTag--active': tagType == '1' }">
        <span>分销设置</span>
      </li>
      <li @click="selectType(2)" :class="{ 'topTag--active': tagType == '2' }">
        <span>会员设置</span>
      </li>
    </ul>
    <div v-if="tagType == '0'">
      <el-steps :active="active" simple>
        <el-step title="1.编辑基本信息" icon="none"></el-step>
        <el-step title="2.编辑销售信息" icon="none"></el-step>
        <el-step title="3.编辑商品信息" icon="none"></el-step>
      </el-steps>
      <div class="pageRoll" v-if="active === 1">
        <div class="navLine">基本信息</div>
        <div class="baseMsg">
          <el-form :model="baseRule" :rules="baseRules" ref="baseRule" label-width="100px">
            <el-form-item label="商品名称" prop="shopName">
              <el-input v-model="baseRule.shopName" style="width: 520px" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="展示分类" prop="showName">
              <el-select v-model="baseRule.showName" style="width: 450px" multiple placeholder="请选择分类"
                @remove-tag="removeTag">
                <el-option-group v-for="group in temShow" :key="group.index">
                  <el-option :label="group.name" :value="group.name" :disabled="true"
                    v-if="group.showCategoryVos.length > 0"></el-option>
                  <el-option v-for="item in group.showCategoryVos" @click.native="selectTem(group, item)"
                    :key="item.name" :label="item.name" :value="item.name" style="margin-left: 20px"></el-option>
                </el-option-group>
              </el-select>
              <el-button type="text" class="ml-20" @click="jumpClass(1)">添加分类</el-button>
            </el-form-item>
            <el-form-item label="供应商">
              <el-select v-model="baseRule.providerName" style="width: 450px" placeholder="请选择供应商"
                @change="supSelect(baseRule.providerName)">
                <el-option v-for="item in temSup" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <el-button type="text" class="ml-20" @click="jumpClass(3)">前往设置</el-button>
            </el-form-item>
            <el-form-item label="商品属性">
              <el-select v-model="baseRule.valueName" placeholder="请选择属性模板" style="width: 450px" @change="modify">
                <el-option v-for="item in temAtts" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <el-button type="text" class="ml-20" @click="jumpClass(4)">前往设置</el-button>
              <div class="valueName">
                <div class="flex between">
                  <div>属性名称</div>
                  <div>属性值</div>
                  <div>操作</div>
                </div>
                <div class="valueName__noList" v-if="baseRule.valueList.length === 0">
                  暂无数据~
                </div>
                <div class="valueName__List" v-for="(item, index) in baseRule.valueList" :key="index" v-else>
                  <el-input v-model="item.name" style="width: 150px"></el-input>
                  <el-input v-model="item.content" style="width: 150px"></el-input>
                  <div @click="baseRule.valueList.splice(index, 1)" aria-disabled="baseRule.valueList.length>1"
                    style="width: 30px">
                    删除
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-button type="primary" plain style="margin-left: 100px; margin-bottom: 20px" size="small"
              @click="addValue">+ 添加属性</el-button>
            <el-form-item label="商品主图" prop="rimgurlList">
              <div class="text-info fs-12">
                图片大小不能超过1MB，图片尺寸750*750像素最佳。
              </div>
              <div class="product">
                <div v-for="(item, index) in productImgList" :key="index" style="position: relative; margin-right: 20px"
                  class="product__productImg">
                  <el-upload class="productImg__uploader product__productImg" :auto-upload="false"
                    :on-change="uploadProductImg" action :show-file-list="false">
                    <img v-if="item.img" :src="item.img" @click="productImgIndex = index" class="product__productImg" />
                    <i v-else @click="productImgIndex = index"
                      class="el-icon-plus product__productImg--uploader--icon"></i>
                  </el-upload>
                  <div v-if="index === 0" class="productImg-text">商品主图</div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="商品视频">
              <div class="productVideo__uploader">
                <el-upload class="productImg__uploader product__productVideo" :auto-upload="false"
                  :on-change="uploadProductVideo" action :show-file-list="false">
                  <video v-if="video != ''" controls :src="video" style="width: 260px; height: 120px"></video>
                  <i v-else class="el-icon-plus product__productVideo--uploader--icon"></i>
                </el-upload>
                <el-upload style="margin-left: 20px" :auto-upload="false" action :on-change="uploadProductVideo"
                  :show-file-list="false">
                  <el-button type="text">替换</el-button>
                </el-upload>
                <el-button type="text" style="margin-left: 20px" class="fc-fe5f4b" @click="video = ''">删除</el-button>
              </div>
              <div class="text-info fs-12">
                请上传5M以内的视图视频（该功能免费试用）
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="navLine">物流设置</div>
        <div class="sendMsg">
          <el-form :model="baseRule" :rules="baseRules" ref="baseRule" label-width="100px">
            <el-form-item label="运费设置" prop="setFreight">
          </el-form>
        </div>
      </div>
      <div class="pageRoll" v-if="active === 2">
        <div class="navLine">规格设置</div>
        <div class="spec">
          规格类型
          <el-radio v-model="radio" label="1" class="spec__left">统一规格</el-radio>
          <el-radio v-model="radio" label="2">多规格</el-radio>
        </div>
        <div v-if="radio == '1'">
          <el-form :model="baseRule" :rules="baseRules" ref="baseRule" label-width="100px">
            <el-form-item label="指导价" prop="shopPrice">
              <el-input-number :min="0" :controls="false" v-model="baseRule.shopPrice" placeholder="0">
              </el-input-number>
            </el-form-item>
            <el-form-item label="实售价">
              <el-input-number :min="0" :controls="false" v-model="baseRule.actPrice" placeholder="0"></el-input-number>
            </el-form-item>
            <el-form-item label="商品限购">
              <el-input-number :step="1" :min="0" step-strictly :controls="false" v-model="baseRule.buyLimit"
                placeholder="0"></el-input-number>
            </el-form-item>
            <el-form-item label="商品库存" prop="stock">
              <el-input-number :step="1" :min="0" step-strictly :controls="false" v-model="baseRule.stock"
                placeholder="0"></el-input-number>
            </el-form-item>
            <el-form-item label="商品积分">
              <el-input-number :step="1" :min="0" step-strictly :controls="false" v-model="baseRule.code"
                placeholder="0"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <div class="specitem">
            <el-radio v-model="limitRadio" label="1">统一限购</el-radio>
            <div v-if="limitRadio == '1'">
              <div class="specitem__inp">
                限购
                <el-input-number :step="1" :min="0" step-strictly :controls="false" class="specitem__inp--inside"
                  v-model="baseRule.limitNum" style=" ;"></el-input-number>件
              </div>
              <div class="valueName" style="width: 700px">
                <div class="flex">
                  <div style="width: 160px">规格值</div>
                  <div style="width: 110px">指导价</div>
                  <div style="width: 100px">实售价</div>
                  <div style="width: 140px">库存</div>
                  <div style="width: 80px">sku图</div>
                  <div>操作</div>
                </div>
                <div class="valueName__noList" v-if="normsList.length === 0">
                  暂无数据~
                </div>
                <div class="valueName__List middle" v-for="(item, index) in normsList" :key="index" v-else>
                  <el-input v-model="item.specs" style="width: 120px"></el-input>
                  <el-input-number :min="0" :controls="false" v-model="item.originalPrice" style="width: 70px">
                  </el-input-number>
                  <el-input-number :min="0" :controls="false" v-model="item.price" style="width: 70px">
                  </el-input-number>
                  <el-input-number :step="1" :min="0" step-strictly :controls="false" v-model="item.stock"
                    style="width: 100px"></el-input-number>
                  <el-upload class="productImg__uploader product__productImg" :auto-upload="false"
                    :on-change="uploadSkuImg" action :show-file-list="false" style="width: 50px; height: 50px"
                    v-if="item.pic === ''" @click="productSkuIndex = index">
                    <i style="width: 50px; height: 50px; line-height: 50px"
                      class="el-icon-plus product__productImg--uploader--icon" @click="productSkuIndex = index"></i>
                  </el-upload>
                  <img :src="item.pic" alt style="width: 50px; height: 50px" v-else />
                  <div @click="normsList.splice(index, 1)">删除</div>
                </div>
                <el-button type="primary" plain style="margin-bottom: 20px" size="small" @click="addSku">+ 添加属性
                </el-button>
              </div>
            </div>
          </div>
          <div class="specitem">
            <el-radio v-model="limitRadio" label="2" class="specitem__inp">规格限购</el-radio>
            <div v-if="limitRadio == '2'">
              <div class="valueName" style="width: 700px">
                <div class="flex">
                  <div style="width: 160px">规格值</div>
                  <div style="width: 110px">指导价</div>
                  <div style="width: 100px">实售价</div>
                  <div style="width: 100px">库存</div>
                  <div style="width: 100px">限购</div>
                  <div style="width: 80px">sku图</div>
                  <div style="width: 31px">操作</div>
                </div>
                <div class="valueName__noList" v-if="normsList.length === 0">
                  暂无数据~
                </div>
                <div class="valueName__List middle" v-for="(item, index) in normsList" :key="index" v-else>
                  <el-input v-model="item.specs" style="width: 120px"></el-input>
                  <el-input-number :min="0" :controls="false" v-model="item.originalPrice" style="width: 70px">
                  </el-input-number>
                  <el-input-number :min="0" :controls="false" v-model="item.price" style="width: 70px">
                  </el-input-number>
                  <el-input-number :step="1" :min="0" step-strictly :controls="false" v-model="item.stock"
                    style="width: 70px"></el-input-number>
                  <el-input-number :step="1" :min="0" step-strictly :controls="false" v-model="item.perLimit"
                    style="width: 70px"></el-input-number>
                  <el-upload class="productImg__uploader product__productImg" :auto-upload="false"
                    :on-change="uploadSkuImg" action :show-file-list="false" style="width: 50px; height: 50px"
                    @click="productSkuIndex = index" v-if="item.pic === ''">
                    <i style="width: 50px; height: 50px; line-height: 50px"
                      class="el-icon-plus product__productImg--uploader--icon" @click="productSkuIndex = index"></i>
                  </el-upload>
                  <img :src="item.pic" alt style="width: 50px; height: 50px" v-else />
                  <div @click="normsList.splice(index, 1)">删除</div>
                </div>
                <el-button type="primary" plain style="margin-bottom: 20px" size="small" @click="addSku">+ 添加属性
                </el-button>
              </div>
            </div>
          </div>
          <div class="codeOne">
            商品积分：
            <el-input-number :step="1" :min="0" step-strictly :controls="false" v-model="baseRule.code"
              style="width: 700px" placeholder="0"></el-input-number>
          </div>
        </div>
        <div class="navLine">其他信息</div>
        <el-form :model="baseRule" :rules="baseRules" ref="baseRule" label-width="100px">
          <el-form-item label="初始销量">
            <el-input-number :step="1" v-model="baseRule.preSaleNum" :placeholder="0" :min="0" step-strictly>
            </el-input-number>
          </el-form-item>
          <el-button type="text" style="margin-left: 100px; margin-bottom: 20px; margin-top: -30px" size="small">前往设置
          </el-button>
          <el-form-item label="服务保障">
            <div v-for="(item, i) in serviceAssuranceList" :key="item.name">
              <el-checkbox :label="i" @change="changeServiceAssuranceList(item)" :checked="item.state">
                <div class="serveMsg">
                  <span style="width: 120px">{{ item.name }}</span>
                  <span style="color: #c6c6c6">{{ item.text }}</span>
                </div>
              </el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="参与接龙" prop="longRadio">
            <el-radio v-model="baseRule.longRadio" label="1">开启</el-radio>
            <el-radio v-model="baseRule.longRadio" label="2">关闭</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div class="pageRoll" v-if="active === 3">
        <div class="shopMsg">
          <img src="../../../../assets/images/ex_img.png" alt style="width: 375px; height: 667px" />
          <div class="shopMsg__right">
            <div class="shopMsg__right--wed">
              <div class="shopMsg__right--wed--text">商品页模板</div>
              <el-select v-model="modelValue" placeholder="请选择" style="width: 300px" size="small">
                <el-option v-for="item in modelOptions" :key="item.label" :label="item.label" :value="item.label">
                </el-option>
              </el-select>
              <el-button style="margin-left: 20px" type="text" plain size="small" @click="modelFlag = true">示例
              </el-button>
              <el-dialog width="30%" title="查看示例" :visible.sync="modelFlag">
                <img src="../../../../assets/images/tem_model.png" style="width: 550px; height: 600px" />
              </el-dialog>
            </div>
            <div style="margin-top: 40px">
              <Weditor :text="allParma.detail" ref="wEditor"></Weditor>
            </div>
          </div>
        </div>
      </div>
      <div class="next">
        <el-button @click="next(1, 'baseRule')" type="primary" v-if="active == 1">下一步</el-button>
        <el-button @click="next(2)" type="primary" v-if="active == 2">上一步</el-button>
        <el-button @click="next(3, 'baseRule')" type="primary" v-if="active == 2">下一步</el-button>
        <el-button type="primary" v-if="active == 3" @click="putAway">上架</el-button>
        <el-button v-if="active == 3">取消</el-button>
      </div>
    </div>
    <div v-if="tagType == '1'">
      <Distribution></Distribution>
    </div>
    <div v-if="tagType == '2'">
      <MemberSet></MemberSet>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Weditor from "@/components/RichEditor.vue";
import Distribution from "./Distribution.vue";
import MemberSet from "./MemberSet.vue";
import {
  getAllSupList,
  getAllPickList,
  getAllCategory,
  putWayGood,
  editGood,
  getAllAttsList,
  updateGood,
} from "@/api/good/goods";
import { upLoad } from "@/api/index";
import cloneDeep from "lodash/cloneDeep";

@Component({
  components: {
    Weditor,
    Distribution,
    MemberSet,
  },
})
export default class AddGood extends Vue {
  // 顶部步骤
  tagType = "0";

  // 每一步操作
  active = 1;

  // 展示分类数组
  temShow = [];

  // 供应商数组
  temSup = [];

  // 属性模板数组
  temAtts = [];

  // 基本信息
  baseRule = {
    shopName: "",
    pickpName: "",
    showName: [],
    providerName: "",
    valueName: "",
    rimgurlList: "",
    preSaleNum: "",
    freight: "",
    shopPrice: "",
    actPrice: "",
    buyLimit: "",
    stock: "",
    code: "",
    limitNum: "",
    // 选择属性列表
    valueList: [],
    longRadio: "2",
  };

  // 基本信息验证
  baseRules = {
    shopName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
    showName: [{ required: true, message: "请选择分类", trigger: "blur" }],
    rimgurlList: [{ required: true, message: "请上传商品主图" }],
    // setFreight: [{ required: true, message: "请选择运费模板" }],
    shopPrice: [
      { required: true, message: "请输入商品指导价", trigger: "blur" },
    ],
    stock: [{ required: true, message: "请输入商品库存", trigger: "blur" }],
    longRadio: [
      { required: true, message: "请选择是否开启接龙", trigger: "blur" },
    ],
  };

  // 上传商品图片
  productImgList = [
    { img: "" },
    { img: "" },
    { img: "" },
    { img: "" },
    { img: "" },
  ];

  // 上传的视频
  video = "";

  // 上传图片下标
  productImgIndex = 0;

  // 上传sku下标
  productSkuIndex = 0;

  // 选择规格类型
  radio = "1";

  // 选择多规格限购类型
  limitRadio = "1";

  normsList = [
    {
      id: "",
      lowStock: "",
      memberPriceDtoList: [
        // {
        //   id: "",
        //   memberLevelId: "",
        //   memberLevelName: "",
        //   memberPrice: "",
        //   productId: "",
        //   skuId: "",
        // },
      ],
      originalPrice: "",
      perLimit: "",
      pic: "",
      price: "",
      productId: "",
      sale: "",
      skuCode: "",
      specs: "",
      stock: "",
    },
  ]; // 选择规格列表

  // 服务保障
  serviceAssuranceList = [
    {
      name: "全场包邮",
      state: false,
      text: "所有商品均无条件包邮",
    },
    {
      name: "7天退换",
      state: false,
      text: "商家承诺7天无理由退换货",
    },
    {
      name: "48小时发货",
      state: false,
      text: "商家承诺订单在48小时内发布",
    },
    {
      name: "假一赔十",
      state: false,
      text: "若收到商品是假冒品牌，可获得十倍赔偿",
    },
    {
      name: "正品保证",
      state: false,
      text: "商家承诺商品正品质量",
    },
  ];

  // 详情模板
  modelOptions = [
    {
      label: "规格折叠",
    },
    {
      label: "规格展开",
    },
  ];

  modelValue = "";

  modelFlag = false;

  // 参数合集
  allParma = {
    // 图片
    albumPics: "",
    // 模板属性
    attribute: "",
    // 模板id
    attributeId: "",
    // 商品分销设置
    distributionSets: [],
    // 商品运费模板
    freightTemplates: [],
    // 运费模板ID
    freightTemplateId: "123",
    // 分拣ID
    sortingCategoryId: "",
    // 分拣名称
    sortingCategoryName: "",
    // 供应商ID
    providerId: "",
    // 供应商名称
    providerName: "",
    // 商品名称
    name: "",
    // 商品属性
    productAttributes: [],
    // 货号
    productSn: "",
    // 商品sku图
    skuStocks: [
      {
        id: "",
        lowStock: "",
        memberPriceDtoList: [
          // {
          //   id: "",
          //   memberLevelId: "",
          //   memberLevelName: "",
          //   memberPrice: "",
          //   productId: "",
          //   skuId: "",
          // },
        ],
        originalPrice: "",
        perLimit: "",
        pic: "",
        price: "",
        productId: "",
        sale: "",
        skuCode: "",
        specs: "",
        stock: "",
      },
    ],
    // 销售专区 0商超 1拼团 2秒杀
    saleMode: "0",
    // 限购 限购类型(默认统一规格，0–统一规格，1–统一限购，2–规格限购)
    limitType: 0,
    // 状态(默认上架，0–下架（仓库中），1–上架，2–已售完)
    status: 1,
    // 商品可获得积分
    giftPoint: "0",
    // 初始销量
    sale: "0",
    // 服务保障
    serviceIds: "",
    // 规格是否展开
    openSpecs: false,
    // 商品详情
    detail: "",
    // 商品展示分类
    productShowCategorys: [],
    // 商品视屏
    videoUrl: "test",
    unit: "克",
    weight: "34",
    // 展示图片
    pic: "",
    // 接龙字段
    dominoState: "1",
  };

  finalData: Array<{
    id: number;
    name: string;
    parentId: number;
    showCategoryId: number;
    productShowCategorySeconds: Array<{
      id: number;
      name: string;
      parentId: number;
      productNumber: number;
      showCategoryId: number;
    }>;
  }> = [];

  mounted() {
    const param = {};
    Promise.all([
      getAllCategory(param),
      getAllPickList(param),
      getAllSupList(param),
      getAllAttsList(param),
    ]).then((res) => {
      this.temShow = res[0].data;
      this.temPick = res[1].data;
      this.temSup = res[2].data;
      this.temAtts = res[3].data;
    });

    /**
     * 编辑时获取数据
     */
    if (this.$route.params.id) {
      this.getDetail(this.$route.params.id);
    }
  }

  /**
   * 获取商品详情
   */
  getDetail(id) {
    editGood(id, {}).then((res) => {
      res.data.productAttributes.filter((item) => {
        return (item.content = item.value);
      });
      res.data.albumPics.split(",").forEach((item, index) => {
        if (item) {
          this.productImgList[index].img = item;
        }
      });
      res.data.serviceIds.split(",").forEach((item) => {
        this.serviceAssuranceList.forEach((v) => {
          if (item === v.name) {
            v.state = true;
          }
        });
      });
      res.data.productShowCategorys.forEach((item) => {
        this.baseRule.showName.push(item.name);
        item.productShowCategorySeconds.forEach((v) => {
          this.baseRule.showName.push(v.name);
        });
      });
      this.limitType = res.data.limitType;
      const list = res.data.skuStocks;
      if (list.length === 1) {
        this.baseRule.shopPrice = list[0].originalPrice;
        this.baseRule.actPrice = list[0].price;
        this.baseRule.buyLimit = list[0].perLimit;
        this.baseRule.stock = list[0].stock;
      } else {
        this.normsList = list;
        this.radio = "2";
        this.baseRule.limitNum =
          res.data.limitType === 1 ? list[0].perLimit : 0;
        this.limitRadio = res.data.limitType === 1 ? "1" : "2";
      }
      this.baseRule.code = res.data.giftPoint;
      this.baseRule.preSaleNum = res.data.sale;
      this.modelValue = res.data.openSpecs ? "规格展开" : "规格折叠";
      this.allParma = res.data;
      this.baseRule.shopName = res.data.name;
      this.baseRule.providerName = res.data.providerName;
      this.baseRule.pickpName = res.data.sortingCategoryName;
      this.baseRule.valueName = res.data.attribute;
      this.baseRule.valueList = res.data.productAttributes;
      this.finalData = res.data.productShowCategorys;
      this.video = res.data.videoUrl;
    });
  }

  /**
   * 选择顶部分类
   */
  selectType(type) {
    this.tagType = type;
  }

  /**
   * 选择模板属性
   */
  modify(item) {
    this.temAtts.forEach((v) => {
      v.value = v.content;
      if (v.name === item) {
        this.allParma.attributeId = v.id;
        this.baseRule.valueList = v.attributeTemplates;
        v.attributeTemplates.forEach((o) => {
          o.value = o.content;
        });
      }
    });
  }

  /**
   * 添加属性
   */
  addValue() {
    const obj = {
      content: "",
      name: "",
      id: "",
      parentId: "",
      value: "",
    };
    this.baseRule.valueList.push(obj);
  }

  /**
   * 文件处理
   */
  dealFile(file) {
    const isJPREG = file.raw.type === "image/jpeg";
    const isJPG = file.raw.type === "image/jpg";
    const isPNG = file.raw.type === "image/png";
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!isJPG && !isPNG && !isJPREG) {
      this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      return;
    }
    if (!isLt1M) {
      this.$message.error("上传头像图片大小不能超过 2MB!");
      return;
    }
  }

  /**
   * @method uploadProductImg
   * @description 上传商品主图
   */
  async uploadProductImg(file) {
    this.dealFile(file);
    const res = await upLoad({
      file: file.raw,
    });
    this.productImgList[this.productImgIndex].img = res.data;
  }

  /**
   * 上传sku
   */
  async uploadSkuImg(file) {
    this.dealFile(file);
    const res = await upLoad({
      file: file.raw,
    });
    this.normsList[this.productSkuIndex].pic = res.data;
  }

  /**
   * 上传视频
   */
  async uploadProductVideo(file) {
    const isVideo = file.raw.type === "video/mp4";
    const isLt = file.size < 5 * 1024 * 1024;

    if (!isVideo) {
      this.$message.error("上传视频只能是 mp4 格式!");
      return;
    }
    if (!isLt) {
      this.$message.error("视频大小不超过5M!");
      return;
    }
    const res = await upLoad({
      file: file.raw,
    });
    this.video = res.data;
  }

  // 选择供应商
  supSelect(e) {
    this.temSup.forEach((item) => {
      if (item.name === e) {
        this.allParma.providerId = item.id;
        this.allParma.providerName = item.name;
      }
    });
  }

  // 点击删除小图标
  removeTag(e) {
    console.log(e);
    // let parent = {};
    // let child = {};
    // this.finalData.forEach((v, i) => {
    //   if (v.name === e) {
    //     this.finalData.splice(i, 1);
    //   }
    //   v.productShowCategorySeconds.forEach((item, index) => {
    //     if (item.id === e) {
    //       child = item;
    //     }
    //   });
    // });
    // this.selectTem(parent, child);
  }

  // 选择展示分类
  selectTem(parent, child) {
    parent = cloneDeep(parent);
    child = cloneDeep(child);
    // 查找父级id
    const parentIndex = this.finalData.findIndex(
      (item) => item.showCategoryId === parent.id,
    );
    let index = parentIndex;
    // 如果不存在往数组添加数据
    if (parentIndex === -1) {
      index = this.finalData.length;
      this.finalData.push(parent);
      this.finalData[index].productShowCategorySeconds = [];
    } else {
      // 此处是个问题 如果已存在 并且 有子集 这里清空就会有问题 二级也会清空
    }

    // 判断是否有子集参数
    if (child) {
      const childIndex = this.finalData[
        index
      ].productShowCategorySeconds.findIndex(
        (item) => item.showCategoryId === child.id,
      );
      // 如果父的子集Array中无数据 添加
      if (childIndex === -1) {
        this.finalData[index].productShowCategorySeconds.push(child);
      } else {
        // 如果已存在 从数组中删除
        this.finalData[index].productShowCategorySeconds.splice(childIndex, 1);
        // if (!this.finalData[index].productShowCategorySeconds.length) {
        //   this.finalData.splice(index, 1);
        // }
      }
    }
    // 最终数据
    // 建议 用树状组件 这个select用的比较复杂 那么多业务逻辑需要自己实现
    this.finalData.forEach((item) => {
      delete (item as any).showCategoryVos;
    });
    this.allParma.productShowCategorys = this.finalData;
  }

  /**
   * 跳转分类/供货商/属性模板
   */
  jumpClass(type) {
    switch (type) {
      case 1:
        this.$router.push({
          name: "calss",
          query: { options: "1" },
          params: { options: "1" },
        });
        break;
      case 2:
        this.$router.push({
          name: "calss",
          query: { options: "2" },
          params: { options: "1" },
        });
        break;
      case 3:
        this.$router.push({ name: "sup" });
        break;
      case 4:
        this.$router.push({
          name: "Attribute",
          query: { options: "pick" },
          params: { options: "1" },
        });
        break;
    }
  }

  /**
   * 添加规格
   */
  addSku() {
    this.normsList.push({
      id: "",
      lowStock: "",
      memberPriceDtoList: [],
      originalPrice: "",
      perLimit: "",
      pic: "",
      price: "",
      productId: "",
      sale: "",
      skuCode: "",
      specs: "",
      stock: "",
    });
  }

  /**
   * 选择服务
   */
  changeServiceAssuranceList(e) {
    e.state = !e.state;
  }

  next(type) {
    // (this.$refs[formName] as any).validate(valid => {
    //   console.log(valid);
    //   if (valid) {
    //     console.log("submit!");
    //   } else {
    //     console.log("error submit!!");
    //     return false;
    //   }
    // });
    switch (type) {
      case 1:
        this.active = 2;
        this.allParma.name = this.baseRule.shopName;
        break;
      case 2:
        this.active = 1;
        break;
      case 3:
        if (this.radio === "1") {
          const tem = this.allParma.skuStocks[0];
          tem.originalPrice = this.baseRule.shopPrice;
          tem.price = this.baseRule.actPrice;
          tem.perLimit = this.baseRule.buyLimit;
          tem.stock = this.baseRule.stock;
        }

        if (this.radio === "2") {
          this.allParma.limitType = this.limitRadio === "1" ? 1 : 2;
          this.allParma.skuStocks = this.normsList;
          this.allParma.skuStocks.forEach((item) => {
            if (this.allParma.limitType === 1) {
              item.perLimit = this.baseRule.limitNum;
            }
          });
        }
        this.allParma.sale = this.baseRule.preSaleNum;
        this.allParma.giftPoint = this.baseRule.code;
        const temArr = [];
        this.serviceAssuranceList.forEach((item) => {
          if (item.state === true) {
            temArr.push(item.name);
          }
        });
        this.allParma.serviceIds = temArr.join(",");
        this.active = 3;
        break;
    }
  }

  /**
   * 上架
   */
  putAway() {
    this.allParma.openSpecs = this.modelValue === "规格折叠" ? true : false;
    this.allParma.detail = (this.$refs.wEditor as any).getHtml();
    const temIng = [];
    this.productImgList.forEach((item) => {
      if (item.img !== "") {
        temIng.push(item.img);
      }
    });
    this.allParma.pic = this.productImgList[0].img;
    this.allParma.albumPics = temIng.join(",");
    this.allParma.attribute = this.baseRule.valueName;
    this.allParma.productAttributes = this.baseRule.valueList;
    this.allParma.videoUrl = this.video;
    this.allParma.dominoState = this.baseRule.longRadio;
    this.allParma.productAttributes.forEach((item) => {
      item.value = item.content;
    });
    this.allParma.productShowCategorys.forEach((item) => {
      delete item.id;
      item.productShowCategorySeconds.forEach((v) => {
        delete v.id;
      });
    });
    if (this.$route.params.id) {
      updateGood(this.allParma).then((res) => {
        console.log("编辑", res);
      });
    } else {
      putWayGood(this.allParma).then((res) => {
        console.log("Res", res);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/goods/index.scss";

.topTag {
  display: flex;
  height: 40px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 40px;
  li {
    padding-left: 20px;
    height: 38px;
    display: flex;
    align-items: center;
    margin-right: 30px;
    cursor: pointer;
    span {
      line-height: 38px;
      display: block;
      padding: 0 20px;
    }
    &.topTag--active span {
      border-bottom: #2d8cf0 2px solid;
      color: #2d8cf0;
    }
  }
}

.pageRoll {
  overflow: auto;
  overflow-x: hidden;
  height: 750px;
}

.pageRoll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.navLine {
  margin-top: 40px;
  margin-bottom: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  padding-left: 30px;
  font-weight: bold;
}

.spec {
  margin-left: 40px;
  margin-bottom: 20px;
  &__left {
    margin-left: 10px;
  }
}

.specitem {
  margin-left: 100px;
  &__inp {
    display: flex;
    align-items: flex-end;
    margin-top: 10px;
    &--inside {
      width: 50px;
      margin: 0px 10px;
    }
  }
}

.dialogTitle {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.dialog__line {
  display: flex;
  padding-left: 20px;
  padding-top: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  &__fir {
    width: 100%;
    text-align: right;
    display: flex;
    align-items: center;
  }
  &__sec {
    width: 100%;
    display: flex;
    margin-top: 10px;
    &--head {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      background-color: #f6f6f6;
    }
    &--body {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #999;
      padding: 10px;
    }
  }
}

.add--text {
  line-height: 30px;
  cursor: pointer;
  color: #2d8cf0;
  margin-left: 90px;
  margin-top: 10px;
}

.pick--dia {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
  background-color: #e9f3fb;
}

.pick--input {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
}

.valueName {
  margin-top: 10px;
  width: 550px;
  padding: 20px 40px;
  border: 1px solid #d7d7d7;
  &__noList {
    display: flex;
    justify-content: center;
    color: #d7d7d7;
    font-size: 15px;
    margin-left: 20px;
    margin-top: 20px;
  }
  &__List {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    div {
      color: red;
      cursor: pointer;
    }
  }
}

.product {
  margin-top: 10px;
}

.productVideo__uploader {
  display: flex;
  align-items: flex-end;
}

.productImg__uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.productImg__uploader:hover {
  border-color: #409eff;
}

.product__productImg {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.product__productVideo {
  width: 260px;
  height: 120px;
  display: inline-block;
}

.product__productVideo--uploader--icon {
  font-size: 28px;
  color: #8c939d;
  width: 260px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.product__productImg--uploader--icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 80px;
  text-align: center;
}

.productImg-uploader-clear {
  position: absolute;
  right: -0.375rem;
  top: -0.375rem;
  font-size: 20px;
  cursor: pointer;
}

.productImg-text {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
  text-align: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0px 0px 6px 6px;
  color: #ffffff;
}

.productImg-icon {
  position: absolute;
  right: -8px;
  top: -5px;
  font-size: 20px;
  text-align: center;
  color: #7f7f7f;
}

.codeOne {
  display: flex;
  margin-left: 40px;
  align-items: center;
  margin-top: 20px;
}

.serveMsg {
  width: 400px;
  display: flex;
  // justify-content: space-between;
}

.shopMsg {
  display: flex;
  padding-top: 40px;
  margin-left: 20px;
  &__right {
    margin-left: 20px;
    &--wed {
      display: flex;
      align-items: center;
      margin-top: 40px;
      height: 40px;
      &--text {
        margin-top: 10px;
        margin-right: 20px;
      }
    }
  }
}

.next {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  box-shadow: 0 0px 10px 0px #d5d5d5;
}
</style>
